<template>
	<view class="mord">
	<!-- 	<view class="h1">
			填写信息
		</view> -->
		<view class="input">
			<view class="li">
				<image src="../../static/img/3/3-10.png" mode="widthFix"></image>
				<view class="x"></view>
				<input class="min" type="number" v-model="val" placeholder="请输入手机号" />
				<view class="right" style="background: none;text-align: right;">
					<view class="b" @click="del">
						<image src="../../static/img/3/3-11.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="li">
				<image src="../../static/img/3/3-12.png" mode="widthFix"></image>
				<view class="x"></view>
				<input class="min" type="number" v-model="code" placeholder="请输入验证码" />
				<view class="right rs" v-if="tim != 0">
					发送验证码({{tim}})
				</view>
				<view class="right" @click="time" v-if="tim == 0">
					发送验证码
				</view>
			</view>
			<view class="li">
				<text>密码</text>
				<view class="x"></view>
				<input type="password" v-model="passa" placeholder="请输入密码" />

			</view>
			<view class="li">
				<text>密码</text>
				<view class="x"></view>
				<input type="password" v-model="passb" placeholder="请再次输入密码" />
			</view>
		</view>
		<view class="next" @click="next">
			确认
		</view>

	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				val: '',
				tim: 0,
				code:'',
				name:'',
				passa:'',
				passb:'',
				verifyRandomCode:'',
				authRandomCode:''
			}
		},
		methods: {
			del(){
				this.val=''
			},

			next() {
				var that = this;
				if(that.passa == that.passb){
					
					that.$Request.post(
						that.$api.httpApi.login.checkAuthCode,
						{"authCode":that.code,"verifyRandomCode":that.verifyRandomCode},
						).then(res=>{
							if(res.code == 200){
								that.$Request.post(
									that.$api.httpApi.login.setPassword,
									{
										'password':that.passb,
										'authRandomCode':res.data.authRandomCode,
										'isMessageVerify':true,
										'verifyRandomCode':res.data.verifyRandomCode
									},
									).then(data=>{
										if(data.code == 200){
											uni.showToast({
												title:'修改成功！',
												duration:1500,
												success() {
													setTimeout(function(){
														uni.navigateBack({
															delta:1
														})
													},2000)
												}
											});
											
										}else{
											uni.showToast({
												title:data.message,
												icon:'none'
											})
										}
									})
							}else{
								uni.showToast({
									title:res.message,
									icon:'none'
								})
							}
						})
					
				}else{
					uni.showToast({
						title:'两次输入的密码不一致！',
						icon:'none'
					})
				}
				
			},
			time() {
				
				var that = this;
				that.$Request.post(
					that.$api.httpApi.login.regCode,
					{"code":that.val},
					).then(res=>{
						if(res.code == 200){
							uni.showToast({
								title:'发送成功！'
							})
							that.tim = 50;
							that.verifyRandomCode = res.data;
							var set = setInterval(function() {
								that.tim--
								if (that.tim <= 0) {
									clearInterval(set)
								}
							}, 1000);
						}else{
							uni.showToast({
								title:res.message,
								icon:'none'
							})
						}
					})
			
			}
		}


	}
</script>

<style scoped>
	.next {
		display: block;
		width: 75%;
		margin: auto;
		height: 98rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 49rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 98rpx;
		margin-top: 77rpx;
	}

	.h2 {
		width: 65%;
		margin: auto;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: left;
		margin-top: 44rpx
	}

	.h2 navigator {
		color: rgba(240, 64, 111, 1);
		display: initial;
	}

	.h1 {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		padding-top: 100rpx;
	}

	.input {
		width: 75%;
		margin: auto;
		/* margin-top: 100rpx; */
	}

	.input .p {
		text-align: right;
		font-size: 28rpx;
		color: #B7B7B7;
	}

	.input .li {
		border-bottom: 1px solid #CECECE;
		padding-bottom: 20rpx;
		margin-top: 60rpx;
	}

	.input .li text {
		display: inline-block;
		vertical-align: middle;
		width: 75rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(65, 65, 65, 1);
	}

	.input .li image {
		width: 26rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.input .li input {
		display: inline-block;
		width: calc(100% - 100rpx);
		vertical-align: middle;
		margin-left: 21rpx;
		font-size: 30rpx;
		color: #B7B7B7;
		font-weight: normal;
	}

	.input .li .min {
		width: calc(100% - 130rpx - 136rpx);
	}

	.input .li .right {
		width: 176rpx;
		height: 54rpx;
		background: rgba(255, 230, 237, 1);
		border-radius: 27rpx;
		margin-left: 16rpx;
		display: inline-block;
		vertical-align: middle;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(240, 64, 111, 1);
		text-align: center;
		line-height: 54rpx;
	}

	.input .li .rs {
		background: #CECECE;
		color: #fff;
	}

	.input .li .right .b {
		display: inline-block;
		width: 40rpx;
		text-align: center;

	}

	.input .li .right .b image {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
	}

	.input .li .x {
		display: inline-block;
		vertical-align: middle;
		width: 1px;
		height: 30rpx;
		background: #E5E5E5;
		/* margin-left: 25rpx; */
	}

	.input .li .right .but {
		font-size: 26rpx;
		width: calc(100% - 65rpx - 16rpx - 15rpx);
		margin-left: 25rpx;
		display: inline-block;
		vertical-align: middle;
		color: #8F8F94;
	}

	.input .p {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(162, 162, 162, 1);
		margin-top: 44rpx;
		text-align: left;
	}
</style>
